<template>
	<div class="search">
		<div class="fg-line" :class="{'fg-toggled' : toggled}">
			<input type="text" class="form-control" placeholder="{{ placeholder }}" @blur="blur" @focus="focus"/>
		</div>
	</div>
</template>

<script>
export default {
  data () {
    return {
      toggled: false,
      placeholder: '搜索中。。。'
    }
  },
  methods: {
    blur () {
      this.toggled = false
    },
    focus () {
      this.toggled = true
    }
  }
}
</script>

<style lang="less">
@import '../vendors/bootstrap/less/mixins';
@import '../vendors/bootstrap/less/variables';

.search {
    @media (max-width: @screen-xs-max) {
        padding: 0 20px
    }

    input[type="text"] {
        width: 100%;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);
        color: #fff;
        font-size: 15px;
        font-weight: 300;
        padding: 6px 0 6px 30px;

        .placeholder(#fff);
    }

    .fg-line {
        max-width: 500px;
        position: relative;

        &:before {
            content: "\E003";
            font-family: 'Glyphicons Halflings';
            position: absolute;
            left: 5px;
            bottom: 5px;
            color: #fff;
            font-size: 16px;
        }
    }
}
</style>